<!DOCTYPE html>
<html>

	<head>
		<% include templates/head.ejs%>
	</head>

	<body>
		<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
			<div class="container-fluid">
				<div class="navbar-header">
					<% if(locals.user){%>
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        	<span class="sr-only">Toggle navigation</span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			            <span class="icon-bar"></span>
			        </button>
					<% }%>
					<a class="navbar-brand" href="/">
						<img src="/img/sun.png" />
					</a>
				</div>
				<% if(locals.user){%>
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li>
							<a href="/user/">User</a>
						</li>
						<li>
							<a href="/other/waterfall">Waterfall</a>
						</li>
						<li>
							<a href="/face/">Doge Face</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">Action</a>
								</li>
								<li>
									<a href="#">Another action</a>
								</li>
								<li>
									<a href="#">Something else here</a>
								</li>
								<li role="separator" class="divider"></li>
								<li>
									<a href="#">Separated link</a>
								</li>
								<li role="separator" class="divider"></li>
								<li>
									<a href="#">One more separated link</a>
								</li>
							</ul>
						</li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li class="info">
							<div data-container="body" data-toggle="popover-icon" data-placement="bottom" title='<%=locals.user.nickname%>' data-content="<div class='icon' style='background-image: url(/uploads/user/<%=locals.user.icon%>)'\>">
								<div class="icon" style="background-image: url(/uploads/user/<%=locals.user.icon%>)" ></div>
							</div>
							<!--<div data-container="body" data-toggle="popover-icon" data-placement="bottom" title='<span class="label label-info"><%=locals.user.nickname%></span>' data-content="<img src='<%=locals.user.icon%>'\>">
								<img class="icon" src="<%=locals.user.icon%>" onerror="this.src='/img/default.jpg'" />
							</div>-->
							<!--<div class="popover popover-icon fade bottom in" role="tooltip" id="popover473668" style="display: block; top: 50px;position: relative;">
								<div class="arrow" style="left: 10px;"></div>
								<div class="col-sm-8 popover-content"><img src="/img/default.jpg" \=""></div>
								<div class="popover-title col-sm-3"><span class="label label-info">good for you~</span></div>
							</div>-->
						</li>
						<li class="info">
							<a href="/logout">Logout</a>
						</li>
					</ul>
				</div>
				<% }%>
			</div>
		</nav>
		<header>
			<h1>NodeJS <small><%= (locals.sub_title==undefined ? "" : locals.sub_title)%></small></h1>
		</header>
		<section class="container-fluid">
			<%- body -%>
		</section>
		<footer>
			<% include templates/footer.ejs%>
		</footer>
	</body>

</html>